@use "sass:math";

.dv-main-layout {
  overflow: hidden;

  // start: viewport title
  .viewport-title {
    $width: 1261px;
    $height: 325px;
    position: absolute;

    width: $width;
    height: $height;
    left: math.div($viewport-width - $width, 2);
    background:
            url("/media/layout/header/header-title.png") no-repeat center,
            url("/media/layout/header/header-bg.png") no-repeat;
  }
  // end: viewport title

  // start: viewport backgrounds
  .viewport-bg {
    @include viewport-size();
    position: absolute;
  }

  @keyframes animation-bg-starry-sky {
    from {
      transform: translate(0, -300px)
    }
    to {
      transform: translate(0, -360px)
    }
  }

  .viewport-bg-starry-sky {
    animation: animation-bg-starry-sky 6s ease-in-out 1s infinite alternate;
    background-image: url("/media/layout/bg/bg-starry-sky.png");
  }

  .viewport-bg-spaceship {
    background-image: url("/media/layout/bg/bg-spaceship.png");
  }

  .viewport-bg-mask-dark {
    background-image: url("/media/layout/bg/bg-mask-dark.png");
  }

  // end: viewport backgrounds

  // start: ornament
  $bed-width: 1343px;
  $bed-height: 421px;

  .ornament-bed {

    width: $bed-width;
    height: $bed-height;

    position: absolute;
    top: $viewport-height - $bed-height;
    left: math.div($viewport-width - $bed-width, 2);

    background-image: url("/media/layout/ornament/ornament-bed.png");
  }

  .ornament-bed-light {
    $width: 2922px;
    $height: 1358px;
    $drift: 300px;

    width: $width;
    height: $height;

    position: absolute;
    top: $viewport-height - $height - $bed-height + $drift;
    left: math.div($viewport-width - $width, 2);
  }

  .ornament-bed-light-blue {
    background-image: url("/media/layout/ornament/ornament-bed-light.png");
  }

  .ornament-bed-light-golden {
    background-image: url("/media/layout/ornament/ornament-bed-light-gold.png");
  }

  .ornament-spotlight {
    $width: 1782px;
    $height: 1534px;
    $drift: 200px;

    width: $width;
    height: $height;

    position: absolute;
    top: $drift;
    left: math.div($viewport-width - $width, 2);
  }
  .ornament-spotlight-blue {
    background-image: url("/media/layout/ornament/ornament-spotlight.png");
  }
  .ornament-spotlight-golden {
    background-image: url("/media/layout/ornament/ornament-spotlight-gold.png");
  }

  // end: ornament
}